<!DOCTYPE HTML >
<html>
    <head>
        <title>伪类样式</title>
        <meta charset='utf-8'>

        <style type='text/css'>
            *{
                color: #252525;
                font-family: 微软雅黑;
                font-size: 16px;
                /*white-space: nowrap;*/
            }
            .title{
                font-weight:bold;
                font-size: 20px;
                margin: 10px;
            }
            /*代码示例*/
            .code{
                border: 1px blue dashed;
                padding:20px;
            }
            /*代码效果*/
            .result{
                border: 1px blue dashed;
                padding:20px;
            }
           a:link{
                color: #FF0000  }           /* 未访问的链接 */
            a:visited {color: #00FF00}  /* 已访问的链接 */
            a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
            a:active {color: #0000FF}    /* 激活 */
        </style>
    </head>
    <body>
    <div class='title'>伪类样式</div>
    <div style='text-indent: 20px'>
        a的这四个伪类，分别表示了a的四种状态<br/>
        为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后！！<br/>
        a:active 必须位于 a:hover 之后！！</div>
    <div class='title'>代码示例</div>
    <div class='code'>
        <pre>
            &lt;style type = 'text/css'&gt;
            a:link {color: #FF0000}     /* 未访问的链接 */
            a:visited {color: #00FF00}  /* 已访问的链接 */
            a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
            a:active {color: #0000FF}   /* 激活 */
            &lt;/style&gt;
              &lt;div &gt;
           &lt;a href='#'&gt;未访问的链接&lt;/a&gt;
           &lt;a href='#'&gt;已访问的链接&lt;/a&gt;
           &lt;a href='#'&gt;鼠标悬停时&lt;/a&gt;
           &lt;a href='#'&gt;激活&lt;/a&gt;
        &lt;/div&gt;
        </pre>
    </div>
    <div class='title'>代码效果</div>
        <div class='result'>
           <a href='#'>未访问的链接</a>
           <a href='#'>已访问的链接</a>
           <a href='#'>鼠标悬停时</a>
           <a href='#'>激活</a>
        </div>
    </body>
</html>